<template>
  <a-card :bordered="false">
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 保证金信息
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:scrollX}"
        :components="draggableComponent"
        bordered
        rowKey="id"
        :columns="columns1"
        :dataSource="dataSource1"
        :loading="loading1"
        class="j-table-force-nowrap"
        >
        <a slot="serviceCharge" slot-scope="text, record" @click="getServiceCharge(record)">{{ text }}</a>
        <a slot="billNo" slot-scope="text, record" @click="goDetail(record.id)">{{ text }}</a>
        <a slot="returnAmount" slot-scope="text, record" @click="getdepositReturnMoney(record)">{{ text }}</a>
        <template slot="status" slot-scope="status">
          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
        </template>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
      </a-table>
    </div>
    <ErpFinanceDepositBillPenetrate ref="depositBillPenetrate"></ErpFinanceDepositBillPenetrate>
    <ErpFinanceReimbursementRelDepositBillListPenetrate  ref="depositReimbursementBillList" ></ErpFinanceReimbursementRelDepositBillListPenetrate>
    <ErpProjectFinanceDepositReturnMoneyPenetrate  ref="depositReturnMoney" ></ErpProjectFinanceDepositReturnMoneyPenetrate>
  </a-card>
</template>

<script>
import Ellipsis from '@/components/Ellipsis'
import { getAction } from '@/api/manage';
import { DragResizable } from '@/mixins/DragResizable'

export default {
  name: 'ErpProjectContractReportForm',
  mixins: [ DragResizable ],
  components: {
    Ellipsis,
    ErpFinanceReimbursementRelDepositBillListPenetrate:()=> import('@/views/scy/penetrate/ErpFinanceReimbursementRelDepositBillListPenetrate'),
      ErpProjectFinanceDepositReturnMoneyPenetrate:()=> import('@/views/scy/penetrate/ErpProjectFinanceDepositReturnMoneyPenetrate'),
      ErpFinanceDepositBillPenetrate:()=> import('@/views/scy/penetrate/ErpFinanceDepositBillPenetrate')
  },
  watch: {
    projectId: {
      handler (val) {
        this.loadData(val)
      },
      immediate: true
    }
  },
  props: {
    //项目id
    projectId: {
      type: String,
      default: 'undefined',
      required: false
    }
  },
  data() {
    return {
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      url: {
        list: '/api/erp/finance/deposit/erpFinanceProjectDepositBill/allList?bpmStatus=3'
      },
      loading1: false,
      loading2: false,
      dataSource1: [],
      dataSource2: [],
      columns1: [
      {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'单据编号',
            align:"center",
            dataIndex: 'billNo',
            scopedSlots: { customRender: 'billNo' },
            ellipsis: true,
            width:155,
          },
          {
            title:'申请部门',
            align:"center",
            dataIndex: 'proposerDeptId_dictText',
            width:150,
            ellipsis: true,
          },
          {
            title:'关联项目',
            align:"center",
            dataIndex: 'preProjectId_dictText',
            scopedSlots: { customRender: 'preProjectId' },
            width:155,
            ellipsis: true,
          },
          {
            title:'项目承接人',
            align:"center",
            dataIndex: 'projectUndertaker_dictText',
            width:155,
            ellipsis: true,
          },
          {
            title:'保证金所属团队',
            align:"center",
            dataIndex: 'teamId_dictText',
            width:155,
            ellipsis: true,
          },
          {
            title:'费用类型',
            align:"center",
            dataIndex: 'feeCategory_dictText',
            width:155,
            ellipsis: true,
          },
          {
            title:'保证金金额(元)',
            align:"center",
            dataIndex: 'remittanceAmount',
            width:155,
            ellipsis: true,
          },
          {
            title:'服务费(元)',
            align:"center",
            dataIndex: 'serviceCharge',
            scopedSlots: { customRender: 'serviceCharge' },
            width:155,
            ellipsis: true,
          },
          {
            title:'利息金额(元)',
            align:"center",
            dataIndex: 'interestAmount',
            width:155,
            ellipsis: true,
          },
          {
            title:'归还金额(元)',
            align:"center",
            dataIndex: 'returnAmount',
            scopedSlots: { customRender: 'returnAmount' },
            width:155,
            ellipsis: true,
          },
          {
            title:'未还金额(元)',
            align:"center",
            dataIndex: 'unreturnAmount',
            width:155,
            ellipsis: true,
          },
          {
            title:'是否归还',
            align:"center",
            dataIndex: 'isReturn_dictText',
            width:155,
            ellipsis: true,
          },
          {
            title:'汇款单位名称',
            align:"center",
            dataIndex: 'remittanceUnit_dictText',
            width:155,
            ellipsis: true,
            
          },
          {
            title:'汇款截止时间',
            align:"center",
            dataIndex: 'remittanceEndTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            },
            ellipsis: true,
            width:155,
          },
          {
            title:'预计返款时间',
            align:"center",
            dataIndex: 'estimateRefundTime',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            },
            ellipsis: true,
            width:155,
          },
      ],
    }
  },

  computed: {
  },
  created() {
    this.customKey = 'columns1'
    this.columns1width = this.columns1.map(val => {
      return val.width
    })

  },
  mounted() {
  },
  methods: {
    //查看详情
    goDetail(id) {
        this.$refs.depositBillPenetrate.initData(id);
        this.$refs.depositBillPenetrate.visible = true;
    },
    getServiceCharge(record){
        //先清空数据
        this.$refs.depositReimbursementBillList.dataSource = []
        this.$refs.depositReimbursementBillList.ipagination.total = 0
        //查询数据
        this.$refs.depositReimbursementBillList.loading = true
        this.$refs.depositReimbursementBillList.relBillId = record.id
        this.$refs.depositReimbursementBillList.searchResets()
        //打开弹窗
        this.$refs.depositReimbursementBillList.visible = true
      },
      //打开归还金额
      getdepositReturnMoney(record){
        //先清空数据
        this.$refs.depositReturnMoney.dataSource = []
        this.$refs.depositReturnMoney.ipagination.total = 0
        //查询数据
        this.$refs.depositReturnMoney.loading = true
        this.$refs.depositReturnMoney.depositId = record.id
        if(record.isTransform==='1'){
          this.$refs.depositReturnMoney.isTrue = true
          this.$refs.depositReturnMoney.relDepositBill = record.id
        }else{
          this.$refs.depositReturnMoney.isTrue = false
          this.$refs.depositReturnMoney.relDepositBill = null
        }
        this.$refs.depositReturnMoney.activeKey = '1'
        this.$refs.depositReturnMoney.searchReset()
         //打开弹窗
        this.$refs.depositReturnMoney.visible = true
      },
    clearDeail(val) {
      this.dataSource1 = []
      this.dataSource = []
      this.projectId = val
      this.loadData()
    },
    async loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      let params = {
        preProjectId: this.projectId,
        pageSize: 100
      };
      // 查询条件
      var param = Object.assign({}, params, this.isorter, {});
      this.loading1 = true;
      let res = await getAction(this.url.list, param)
      this.loading1 = false;
      if (res.success) {
        this.dataSource1 = res.result.records;
      }
      this[this.customKey].forEach((val,index) => {
        val.width = this[this.customKey+'width'][index]
      })
      this[this.otherKey].forEach((val,index) => {
        val.width = this[this.otherKey+'width'][index]
      })
    }
  }
}
</script>
<style scoped>
</style>
